<template>
  <div class="login">
    <div class="content">
      <a-form
          :model="formState"
          name="basic"
          :labelCol="{ span: 4, }"
          :wrapperCol="{span: 18,}"
          autoComplete="off"
          @finish="onFinish"
      >
        <a-form-item
            label="账号"
            name="account"
            :rules="[{ required: true,message: '请输入账号!'}]"
        >
          <a-input v-model:value="formState.account"/>
        </a-form-item>

        <a-form-item
            label="密码"
            name="password"
            :rules="[{required: true,message: '请输入密码！'}]"
        >
          <a-input-password v-model:value="formState.password"/>
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{offset:4,span:16}">
          <a-checkbox v-model:checked="formState.remember"
          >记住我
          </a-checkbox>
        </a-form-item>

        <a-form-item :wrapperCol="{ offset: 4, span: 16, }">

          <a-button style="margin-left: 100px" type="primary" html-type="submit">
            登录
          </a-button>

        </a-form-item>
      </a-form>
    </div>
    <div/>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import axios from "axios";
import {useRouter} from "vue-router";
import {$login} from "@/api/login";
import {md5} from "js-md5";
import router from "@/router";
import {miniMenu, selectedMenu} from "@/views/system/layout/Layout";

const $router = useRouter();
//表单数据
const formState = reactive({
  account: "",
  password: "",
  remember: false,
});

async function onFinish() {
  const {account, password, remember} = formState
  try {
    const md5Password = md5(md5(password).split('').reverse().join(''))
    let code = await $login({

      account: account,
      password: md5Password,
      remember: remember
    })
    if (code == 200) {
        $router.push("/layout")
    }
  } catch (error) {
    console.log(error)
  }
}


</script>

<style lang="css">
* {
  margin: 0;
  padding: 0;
  border: 0;
}

.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, rgb(5, 57, 79), rgb(200, 235, 250));
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    padding: 20px;
    width: 500px;
    height: 250px;
    border: 1px solid #fff;
    border-radius: 6px;

  }
}
</style>
